<template>
	<view class="recoItem">
		<a class="noteContent" href="/">
			<view class="waterfall-img-border">
				<i class="multi-icon"></i>
				<image :src="waterfallImg"></image>
			</view>
			<span>{{title}}</span>
		</a>
		<!-- 卡片的页脚 -->
		<view class="cardFoote">
			<a href="/">
				<view class="profile-text">
					<image :src="profileImg" mode=""></image>
					<p class="profile-avatar-name">{{avatarName}}</p>
				</view>
			</a>
			<view class="profile-zan">
				<uni-icons v-if="zans" type="heart-filled" size="20" color="#FF696D"
					@click="recoItemHandle(recoId,zan)"></uni-icons>
				<uni-icons v-else type="heart" size="20" @click="recoItemHandle(recoId,zan)"></uni-icons>
				<span>1234</span>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: ''
			},
			recoId: {
				type: Number
			},
			waterfallImg: {
				type: String
			},
			profileImg: {
				type: String
			},
			avatarName: {
				type: String
			},
			zan: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				zans: this.zan
			}
		},
		methods: {
			recoItemHandle(e, v) {
				this.zans = !this.zans
				this.$emit("fromChild", e, v)
			}
		}
	}
</script>

<style lang="scss" scoped>
	a {
		text-decoration: none;
	}

	.recoItem {
		min-height: 200px;
		background-color: #fff;
		border-radius: 4px;

		.noteContent {
			display: block;
			color: #3b414e;
			font-size: 14px;

			.waterfall-img-border {
				max-width: 100%;
				max-height: 100%;

				image {
					width: 100%;
				}
			}

			span {
				display: block;
				padding: 0 10px;
				
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1;
				-webkit-box-orient: vertical;
			}
		}

		/* 卡片的页脚 */
		.cardFoote {
			display: flex;
			justify-content: space-between;
			margin-top: 4px;
			padding: 0 10px 4px;
			color: #999;

			.profile-text {
				display: flex;

				image {
					height: 20px;
					width: 20px;
					border-radius: 50%;
					margin-right: 5px;
				}

				.profile-avatar-name {
					color: #999;
					font-weight: 600;
				}
			}

			.profile-zan {
				display: flex;
				justify-content: center;

				span {
					margin-left: 4px;
				}
			}
		}
	}
</style>
